<template>
  <div class="col over-auto">
    <common-table :tableHeight="'calc(100% - 70px)'" v-loading="tableLoading" show-index show-check-box
                  :columns="columns" :list="list">
    </common-table>
    <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                @pagination="pagination"/>
    <template v-if="dialogVisible">
      <faultDetailDialog :batchCode="batchCode" :deviceCode="deviceCode" :dialogVis="dialogVisible"
                         @update:dialogVis="closeDialog"></faultDetailDialog>
    </template>
  </div>
</template>

<script>
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import faultDetailDialog from "./dialog/faultDetailDialog.vue"
  import { queryDeviceGztkDataPage, queryUpMainGZDetail } from "@/api/showManage/index"

  export default {
    components: {
      CommonTable,
      faultDetailDialog
    },
    props: {
      deviceCode: String
    },
    data() {
      return {
        columns: [
          {
            title: "批次号",
            prop: "batchCode",
            align: "center"
          },
          {
            title: "故障脱扣时间",
            prop: "createTime",
            sortable: true,
            align: "center"
          },
          {
            title: "操作",
            align: "center",
            width: "150",
            render: (h, params) => {
              return h("div", [h("el-button", {
                props: {
                  type: "primary",
                  size: "mini"
                },
                on: {
                  click: () => {
                    this.handleDetail(params)
                  }
                }
              }, "数据查看")])
            }
          }
        ],
        list: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,
        tableLoading: false,
        dialogVisible: false,
        batchCode: "",
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getListData()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      pagination(pageItem) {
        this.getListData(pageItem.page, pageItem.limit)
      },
      async getListData() {
        this.tableLoading = true
        const { status, success, object, message } = await queryDeviceGztkDataPage({
          ...this.page,
          deviceCode: this.deviceCode
        })
        if (status == 200) {
          this.count = object.count
          this.list = object.data
        }
        this.tableLoading = false
      },
      handleDetail(row) {
        this.dialogVisible = true
        this.batchCode = row.row.batchCode
      },
      closeDialog() {
        this.dialogVisible = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
